<template>
  <!-- 顶部栏 -->
  <van-nav-bar title="我的" placeholder fixed />
  <!-- 内容部分 -->

  <div class="user-info">
    <van-image round width="100px" height="100px" class="avatar" :src="userData.avatar" />
    <span class="nickname">昵称：{{ userData.nickname }}</span>
  </div>
  <van-cell title="修改头像" is-link to="/updateuseravatar" />
  <van-cell title="修改用户名" is-link to="/updateusername" />
  <van-cell title="修改密码" is-link to="/updatepwd" />
  <van-button type="danger" block @click="logoutFn()">退出登录</van-button>
  <!-- 底部导航栏 -->
  <van-tabbar v-model="active" route placeholder>
    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" to="/cart" :badge="cartArr.length">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/my">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>

import { userDataReq } from '@/api/user'
import { cartArr } from '@/stores/cart'
import { getlocalStorage } from '@/utils/localStorage'
import { showConfirmDialog } from 'vant'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
let active = ref(3)
let userData = ref([])

getUserData()
async function getUserData() {
  let res = await userDataReq(getlocalStorage.userid)
  console.log(res.data)
  if (res.data.code == 200) {
    userData.value = res.data.data[0]
    console.log(userData.value.nickname)
  }
}
let router = useRouter()
function logoutFn() {
  showConfirmDialog({
    title: '提示',
    message: '确定退出登录？',
  }
  ).then(() => {
    localStorage.clear()
    router.push('/')
  }
  ).catch(() => { })

}
</script>
<style scoped>
.user-info {
  background-color: chartreuse;
  padding-top: 10px;
  display: flex;
  align-items: center;
}

.avatar {
  margin-left: 10px;
  margin-right: 50px;
}
</style>
